<template>
    <div class="order-detail-view view-container">

        <header-module
                left-custom
                padding
        >
            <template #left-con>
                <div>
                    <span style="font-size: 16px; margin-right: 20px">订单：{{ datas.order.orderNumber }}</span>
                    <el-tag
                            type="warning"
                            size="small"
                    >{{ getStatus() }}</el-tag>
                </div>
            </template>

            <template #btn>
                <el-button
                        class="border-btn"
                        size="small"
                        @click="onBack"
                >返回</el-button>
                <template v-if="datas.order.id">
                    <el-button
                            v-auth="{v:['crm:order:distributor:pms','crm:order:terminal:pms','crm:order:agent:pms'],bool:datas.order.orderStatus == 0 || datas.order.orderStatus == -1 || datas.order.orderStatus == 5}"
                            class="delete-btn"
                            size="small"
                            @click="onDelete"
                    >删除</el-button>
                    <el-button
                            v-auth="{v:['crm:order:distributor:pms','crm:order:terminal:pms','crm:order:agent:pms'],bool:datas.order.orderStatus == 0 || datas.order.orderStatus == -1}"
                            class="main-btn"
                            size="small"
                            type="primary"
                            @click="onEdit"
                    >编辑</el-button>
                    <el-button
                            v-auth="{v:['crm:order:distributor:pms','crm:order:terminal:pms','crm:order:agent:pms'],bool:datas.order.orderStatus == 2}"
                            class="main-btn"
                            size="small"
                            type="primary"
                            @click="onCancel"
                    >取消订单</el-button>
                    <!--          <template v-if="datas.order.orderType == 1">-->
                    <!--            <el-button-->
                    <!--              v-auth="{v:['crm:order:distributor:pms','crm:order:terminal:pms'],bool:datas.order.orderStatus == 0 || datas.order.orderStatus == -1 || datas.order.orderStatus == 5}"-->
                    <!--              class="delete-btn"-->
                    <!--              size="small"-->
                    <!--              @click="onDelete"-->
                    <!--            >删除</el-button>-->
                    <!--            <el-button-->
                    <!--              v-auth="{v:['crm:order:distributor:pms','crm:order:terminal:pms'],bool:datas.order.orderStatus == 0 || datas.order.orderStatus == -1}"-->
                    <!--              class="main-btn"-->
                    <!--              size="small"-->
                    <!--              type="primary"-->
                    <!--              @click="onEdit"-->
                    <!--            >编辑</el-button>-->
                    <!--            <el-button-->
                    <!--              v-auth="{v:['crm:order:distributor:pms','crm:order:terminal:pms'],bool:datas.order.orderStatus == 2}"-->
                    <!--              class="main-btn"-->
                    <!--              size="small"-->
                    <!--              type="primary"-->
                    <!--              @click="onCancel"-->
                    <!--            >取消订单</el-button>-->
                    <!--          </template>-->
                    <!--          <template v-else-if="datas.order.orderType == 2">-->
                    <!--            <el-button-->
                    <!--              v-auth="{v:['crm:order:terminal:pms'],bool:datas.order.orderStatus == 0 || datas.order.orderStatus == -1 || datas.order.orderStatus == 5}"-->
                    <!--              class="delete-btn"-->
                    <!--              size="small"-->
                    <!--              @click="onDelete"-->
                    <!--            >删除</el-button>-->
                    <!--            <el-button-->
                    <!--              v-auth="{v:['crm:order:terminal:pms'],bool:datas.order.orderStatus == 0 || datas.order.orderStatus == -1}"-->
                    <!--              class="main-btn"-->
                    <!--              size="small"-->
                    <!--              type="primary"-->
                    <!--              @click="onEdit"-->
                    <!--            >编辑</el-button>-->
                    <!--            <el-button-->
                    <!--              v-auth="{v:['crm:order:terminal:pms'],bool:datas.order.orderStatus == 2}"-->
                    <!--              class="main-btn"-->
                    <!--              size="small"-->
                    <!--              type="primary"-->
                    <!--              @click="onCancel"-->
                    <!--            >取消订单</el-button>-->
                    <!--          </template>-->

                    <el-button
                            v-auth="{v:['crm:order:delivery:pms'],bool:(datas.order.orderStatus == 2 || datas.order.orderStatus == 3) && !datas.order.ifAllDelivery}"
                            class="main-btn"
                            size="small"
                            type="primary"
                            @click="onDelivery"
                    >发货</el-button>
                    <el-button
                            v-auth="{v:['crm:order:goods:pms'],bool:datas.order.orderStatus == 3 || datas.order.orderStatus == 4}"
                            class="main-btn"
                            size="small"
                            type="primary"
                            @click="onGoods"
                    >确认收货</el-button>
                </template>

            </template>

        </header-module>

        <div class="info-container">
            <infomation-view :datas="datas.order" />
        </div>

        <div class="main-content">

            <el-tabs
                    v-model="activeName"
                    class="elTabs"
                    @tab-click="handleClick"
            >
                <el-tab-pane
                        label="订单产品"
                        name="first"
                >
                    <order-product-view :datas="datas" />
                </el-tab-pane>
                <el-tab-pane
                        v-if="datas.order.orderStatus > 1"
                        label="发货记录"
                        name="second"
                >
                    <delivery-record-view
                            ref="refRecord"
                            :datas="datas"
                    />
                </el-tab-pane>
                <el-tab-pane
                        label="操作记录"
                        name="third"
                >
                    <operation-view mode="order" />
                </el-tab-pane>
            </el-tabs>

        </div>

        <delivery-dialog
                ref="refDelivery"
                @success="refreshData"
        />

    </div>
</template>

<script>
import {useRoute, useRouter} from 'vue-router'
import {defineAsyncComponent, defineComponent, getCurrentInstance, inject, onBeforeMount, reactive, toRefs,} from 'vue'

export default defineComponent({
        name: 'Index',
        components: {
            infomationView: defineAsyncComponent(() =>
                import('./modules/infomationView.vue')
            ),
            orderProductView: defineAsyncComponent(() =>
                import('./modules/orderProductView.vue')
            ),
            deliveryRecordView: defineAsyncComponent(() =>
                import('./modules/deliveryRecordView.vue')
            ),
            deliveryDialog: defineAsyncComponent(() =>
                import('../modules/deliveryDialog.vue')
            ),
        },
        setup() {
            const currentInstance = getCurrentInstance()
            const route = useRoute()
            const router = useRouter()
            const api = inject('api')

            var data = reactive({
                datas: {
                    order: {
                        isSplit: 0,
                    },
                    orderDetail: [],
                },
                activeName: 'first',
                refDelivery: null,
                refRecord: null,
            })

            const handleClick = () => {}

            const onDelete = (row) => {
                currentInstance.proxy
                    .alertBox({
                        message: '是否确认删除此订单？',
                        title: '删除',
                    })
                    .then(() => {
                        api.order.ORDER_DELETE(data.datas.order.id).then((res) => {
                            if (res.code) {
                                currentInstance.proxy.customMessage({
                                    type: 'error',
                                    message: res.msg,
                                })
                            } else {
                                currentInstance.proxy.customMessage({
                                    type: 'success',
                                    message: '删除成功',
                                })
                                router.back()
                            }
                        })
                    })
                    .catch((err) => {
                        console.log(err)
                    })
            }

            const getData = (id) => {
                api.order.GET_ORDER_DETAIL(id).then((res) => {
                    if (!res.code && res.data) {
                        data.datas = res.data.order
                    }
                })
            }

            const onCancel = () => {
                currentInstance.proxy
                    .alertBox({
                        message: '是否确认取消订单？',
                        title: '取消订单',
                    })
                    .then(() => {
                        api.order.ORDER_CANCEL(data.datas.order.id).then((res) => {
                            if (!res.code) {
                                currentInstance.proxy.customMessage({
                                    type: 'success',
                                    message: '操作成功',
                                })
                                getData(route.query.id)
                            } else {
                                currentInstance.proxy.customMessage({
                                    type: 'error',
                                    message: res.msg,
                                })
                            }
                        })
                    })
                    .catch((err) => {
                        console.log(err)
                    })
            }

            const onGoods = () => {
                let hint = '确认收货后将结束订单，是否要进行确认收货操作?'
                if (!data.datas.order.ifAllDelivery) {
                    hint =
                        '该订单仍有部分产品未全部发货，确认订单后将结束订单，不能继续发货，是否要进行确认收货操作?'
                }
                currentInstance.proxy
                    .alertBox({
                        message: hint,
                        title: '确认收货',
                    })
                    .then(() => {
                        api.order.ORDER_CONFIRM_GOODS(data.datas.order.id).then((res) => {
                            if (!res.code) {
                                currentInstance.proxy.customMessage({
                                    type: 'success',
                                    message: '操作成功',
                                })
                                getData(route.query.id)
                            } else {
                                currentInstance.proxy.customMessage({
                                    type: 'error',
                                    message: res.msg,
                                })
                            }
                        })
                    })
                    .catch((err) => {
                        console.log(err)
                    })
            }

            const onBack = () => {
                router.back()
            }

            const onEdit = () => {

                if (data.datas.order.orderType == '2') {
                    router.push({ name: 'addOrder1', query: { id: data.datas.order.id } })
                } else if (data.datas.order.orderType == '1') {
                    router.push({ name: 'addOrder', query: { id: data.datas.order.id } })
                } else {
                    router.push({ name: 'addAgentOrder', query: { id: data.datas.order.id } })
                }
            }

            const onDelivery = () => {
                data.refDelivery.openDialog(data.datas)
            }

            const refreshData = () => {
                getData(route.query.id)
                if (data.refRecord) {
                    data.refRecord.getListData()
                }
            }

            const getStatus = () => {
                let str = ''
                switch (data.datas.order.orderStatus) {
                    case '-1':
                        str = '审核未通过'
                        break
                    case '0':
                        str = '草稿'
                        break
                    case '1':
                        str = '审核中'
                        break
                    case '2':
                        str = '待发货'
                        break
                    case '3':
                        str = '已发货（部分发货）'
                        break
                    case '4':
                        str = '已发货'
                        break
                    case '5':
                        str = '已取消'
                        break
                    case '6':
                        str = '已收货'
                        break
                }

                return str
            }

            onBeforeMount(() => {
                if (route.query.id) {
                    getData(route.query.id)
                }
            })

            return {
                ...toRefs(data),

                onCancel,
                handleClick,
                onBack,
                onGoods,
                onDelivery,
                onEdit,
                getStatus,
                refreshData,
                onDelete,
            }
        },
    })
</script>

<style scoped>
</style>
